<template>
    <div class="container">
        <div v-show="state.visible" class="right-container">
            <span class="icon-close" @click="closeContainer">×</span>
            <!-- <iframe ref="iframe" src="https://5591.test.bobgo.cn/?tid=%E7%BB%88%E8%BA%AB%E6%95%99%E8%82%B2%E5%B9%B3%E5%8F%B0&embed=1" frameborder="0" /> -->
            <iframe ref="iframe" src="https://5591-9xzeijei.dev.bobgo.cn/?tid=ywypt&embed=1" frameborder="0" />
            <!-- <iframe ref="iframe" src="http://localhost:8001/?tid=%E7%BB%88%E8%BA%AB%E6%95%99%E8%82%B2%E5%B9%B3%E5%8F%B0&embed=1" frameborder="0" /> -->
            <!-- <iframe ref="iframe" src="http://127.0.0.1:5501/test.html" frameborder="0" /> -->
        </div>
        <img v-show="!state.visible" class="button" src="./img/logo.jpg" @click="openContainer" />
    </div>
</template>

<script lang="ts">
export default { name: 'Embed' }
</script>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'

const iframe = ref()

const state = reactive({
    visible: false,
})

const postData = {
    greetings: '这是一段问候语',
    quickerQuestions: ['猜你想问一？', '猜你想问二？'],
}

const openContainer = () => {
    state.visible = true
}

const closeContainer = () => {
    state.visible = false
}

const messageListener = (event) => {
    if (event.data === 'iframe onMounted') {
        iframe.value.contentWindow.postMessage(JSON.stringify(postData), '*')
        window.removeEventListener('message', messageListener)
    }
}

onMounted(() => {
    window.addEventListener('message', messageListener)
})
</script>
<style lang="scss" scoped>
@media screen and (max-width: 770px) {
    .container {
        .right-container {
            width: 100% !important;
        }
    }
}

.container {
    width: 100%;
    height: 100%;
    background: url(./img/bg.png) no-repeat 100% / cover;

    .right-container {
        display: flex;
        position: relative;
        width: 33%;
        height: 100%;
        float: right;
        box-shadow: rgb(8 23 26 / 20%) 0 4px 12px 0;

        .icon-close {
            position: absolute;
            top: 14px;
            right: 10px;
            font-size: 30px;
            cursor: pointer;
        }

        iframe {
            flex: 1;
            width: 100%;
        }
    }

    .button {
        position: fixed;
        top: 84%;
        right: 10px;
        width: auto;
        height: 50px;
        cursor: pointer;
    }
}
</style>
